<template>
    <div class="goods-image">
        <div class="large" v-show="!elementObj.isOutside" :style="[{backgroundImage:`url(${images[currIndex]})`},bgPosition]"></div>
        <div class="middle" ref="target">
            <img :src="images[currIndex]" alt="">
            <div class="layer" v-show="!elementObj.isOutside" :style="position"></div>
        </div>
        <ul class="small">
            <li v-for="(img,i) in images" :key="img" :class="{active:i===currIndex}">
                <img @mouseenter="currIndex=i" :src="img" alt="">
            </li>
        </ul>
    </div>
</template>
<script>
    import {useMouseInElement} from "@vueuse/core";

    export default {
        name: 'GoodsImage',
        props: {
            images: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
                currIndex: 0,
                position: {
                    left: 0,
                    top: 0
                },
                bgPosition: {
                    backgroundPositionX: 0,
                    backgroundPositionY: 0
                },
                elementObj: {
                    elementX: 0,
                    elementY: 0,
                    isOutside: true
                },

            }
        },
        created() {

        },
        mounted() {
            // elementX 鼠标基于容器左上角X轴偏移
            // elementY 鼠标基于容器左上角Y轴偏移
            // isOutside 鼠标是否在模板容器外
            const {elementX, elementY, isOutside} = useMouseInElement(this.$refs.target)
            this.elementObj.elementX = elementX
            this.elementObj.elementY = elementY
            this.elementObj.isOutside = isOutside
        },
        updated() {
        },
        watch: {
            elementObj: {
                handler() {

                    let left = 0
                    let top = 0
                    if (this.elementObj.elementX < 100) {
                        left = 0
                    } else if (this.elementObj.elementX > 300) {
                        left = 200
                    } else {
                        left = this.elementObj.elementX - 100
                    }

                    if (this.elementObj.elementY < 100) {
                        top = 0
                    } else if (this.elementObj.elementY > 300) {
                        top = 200
                    } else {
                        top = this.elementObj.elementY - 100
                    }

                    // 设置大背景的定位
                    this.bgPosition.backgroundPositionX = -left * 2 + 'px'
                    this.bgPosition.backgroundPositionY = -top * 2 + 'px'

                    // 设置遮罩容器的定位
                    this.position.left = left + 'px'
                    this.position.top = top + 'px'

                },
                deep: true

            },

        }

    }
</script>
<style scoped lang="less">
    .goods-image {
        width: 480px;
        height: 400px;
        position: relative;
        display: flex;
        z-index: 500;

        .large {
            position: absolute;
            top: 0;
            left: 412px;
            width: 400px;
            height: 400px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-repeat: no-repeat;
            background-size: 800px 800px;
            background-color: #f8f8f8;

        }


        .middle {
            width: 400px;
            height: 400px;
            background: #f5f5f5;
            position: relative;
            cursor: move;

            .layer {
                width: 200px;
                height: 200px;
                background: rgba(0, 0, 0, .2);
                left: 0;
                top: 0;
                position: absolute;
            }
        }

        .small {
            width: 80px;

            li {
                width: 68px;
                height: 68px;
                margin-left: 12px;
                margin-bottom: 15px;
                cursor: pointer;

                &:hover, &.active {
                    border: 2px solid @xtxColor;
                }
            }
        }
    }
</style>